<template>
<div class="box">
    <div class="left" :style="{height:height}">
        <!-- <checkBoxItem :title="t1" :height="cHeight1"></checkBoxItem>
        <div class="bgline"></div>
        <checkBoxItem :title="t2" :height="cHeight2"></checkBoxItem> -->
        <!-- '申请趋势', '申请人排名', '申请人专利类型', '申请人申请占比','发明人排名','发明人专利类型','发明人申请占比','代理机构排名','代理机构专利类型','代理机构申请占比' -->

        <div class="leftS" style="border:1px solid #ebebeb;padding:14px; box-shadow: 4px 4px 4px #efeeee;">
            <div style="font-size:14px;font-weight:700;margin-bottom:20px;border-bottom:1px solid #efeeee;height:28px"> 列表分析:</div>
            <el-radio-group v-model="radio1">

                <el-radio-button v-for="(item,index) in trendList" :key="index" :label="item.name" />

            </el-radio-group>

        </div>
        <div style="flex:1; border:1px solid #ebebeb;padding:14px; box-shadow: 4px 4px 4px #efeeee;margin-top:20px;position:relative">
            <div style="font-size:14px;font-weight:700;margin-bottom:20px;border-bottom:1px solid #efeeee;height:28px"> 深度分析:</div>
            <div class="selects">
                <div style="font-size:14px;font-weight:700;margin-bottom:6px"> 分析维度: </div>
                <el-select v-model="value1" size="mini" placeholder="请选择" @change="optionChange1">
                    <el-option v-for="(item,index) in options1" :key="index" :label="item.value" :value="item.key" />

                </el-select>
                <div v-if="type !== 3" style="margin-top:20px;font-size:14px;font-weight:700;margin-bottom:6px"> 分析指标: </div>
                <el-select v-if="type !== 3" v-model="value2" size="mini" placeholder="请选择" @change="optionChange2">
                    <el-option v-for="(item,index) in options2" :key="index" :label="item.value" :value="item.key" />

                </el-select>
                <div style="margin-top:20px;font-size:14px;font-weight:700;margin-bottom:6px"> 分析范围: </div>
                <el-select size="mini" v-model="limits" placeholder="请选择">
                    <el-option v-for="item in options3" :key="item.value" :label="item.value" :value="item.key">
                    </el-option>

                </el-select>

            </div>
             <el-button style="width:86%;position:absolute;bottom:20px" type="primary" size="mini" @click="inflate">分析</el-button>
        </div>

        <!-- <div style="position: absolute;width:100%;bottom:20px;padding-right:32px">
            <el-button style="width:100%" type="primary" size="mini" @click="inflate">分析</el-button>
        </div> -->

    </div>
    <div class="chart">
        <el-card class="box-card" :style="{height:height}">
            <div slot="header" class="clearfix" style="padding-right: 20px;">
                <span>申请趋势</span>
                <el-button type="primary" size="mini" icon="el-icon-s-home" style="float: right" @click="back">返回</el-button>
                <el-button size="mini" style="float: right;margin-right:12px" type="primary" @click="exportE">导出Excel</el-button>
                <el-button size="mini" style="float: right;" type="primary" @click="download">下载图片</el-button>

            </div>
            <!-- <div class="title">
                图表展示的是专利申请量的发展趋势。通过申请趋势可以从宏观层面把握分析对象在各时期的专利申请热度变化。申请数量的统计范围是目前已公开的专利。一般发明专利在申请后3~18个月公开，实用新型专利和外观设计专利在申请后6个月左右公开
            </div> -->

            <el-row id="chart" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;margin-top: 21px;height:500px;width:94%;padding-left:0" />

            <el-table :header-cell-style="{color:'black'}" id="table" size="mini" :data="tableData" style="width: 95%;
             border: 1px solid #ebebeb;box-shadow: 4px 4px 4px #efeeee;
             margin-bottom: 20px;
             padding: 20px;
             border-radius:6px">

                <el-table-column v-for="(item,index) in legend" :key="index" align="left" :prop="item" :label="item" />
                <!-- <el-table-column align="left" prop="k2" label="专利数量" /> -->

            </el-table>

        </el-card>
    </div>
    <!-- <div class="form">3</div> -->

</div>
</template>

<script>
import {
    getData,
    getZhu,
    getZhu2,
    getPie
} from '@/api/retrieval'
import checkBoxItem from './components/checkBoxItem.vue'
import LineChart from '../../views/dashboard/admin/components/LineChart.vue'
import domtoimage from 'dom-to-image'
import option from './echarts.js'
import optionZhu from './zhu.js'
import optionZhu2 from './zhu2.js'
import pie from './pie.js'

import {
    inflate,
    inflateZhu,
    inflateZhu2,
    inflatePie
} from './dataInflate.js'
import * as echarts from 'echarts'
import analysisList from './analysisL.js'

export default {
    name: 'Analysis',

    components: {
        checkBoxItem,
        LineChart
    },
    data() {
        return {
            height: window.innerHeight - 50 + 'px',
            cHeight1: '400px',
            cHeight2: '280px',
            // 1 折线图   2 柱状图  3 柱状图 多维  4 饼状图
            trendList: [{
                    name: '1.申请趋势',
                    type: '1'
                },
                {
                    name: '2.申请排名',
                    type: '2'
                },
                {
                    name: '3.申请规模',
                    type: '3'
                },
                {
                    name: '4.申请占比',
                    type: '4'
                },

            ],

            radio1: '1.申请趋势', //默认选择 第一个
            type: 1, //默认选择 第一个  echarts 类型

            legend: [],

            options1: [],
            value1: '',

            options2: [],
            value2: '',

            options3: [{
                    key: "10",
                    value: "10"

                },
                {
                    key: "20",
                    value: "20"

                },
                {
                    key: "30",
                    value: "30"

                }
            ],

            limits: 10,
            tableData: [],
            ratio: 1,

            excelList: null

        }
    },
    watch: {
        radio1(newV, oldV) {
            let type = (this.trendList.filter(item => {
                return item.name == newV

            }))[0].type

            this.type = type

            console.log(type)

            this.limit = 10

            if (type == 1) {

                this.options1 = analysisList.applicationTrend
                this.value1 = analysisList.applicationTrend[0].key

                this.options2 = analysisList.applicationTrend[0].children
                this.value2 = analysisList.applicationTrend[0].children[0].key
                this.ratio = 1

                this.initChart(type)

            }

            if (type == 2) {

                this.options1 = analysisList.applicationRank[0]
                this.value1 = analysisList.applicationRank[0][0].key

                this.options2 = analysisList.applicationRank[1]
                this.value2 = analysisList.applicationRank[1][0].key

                this.ratio = this.options2[0].num
                this.initChart(type)

            }

            if (type == 3) {

                this.options1 = analysisList.applicationScale
                this.value1 = analysisList.applicationScale[0].key

                this.ratio = this.options2[0].num
                this.initChart(type)

            }

            if (type == 4) {

                this.options1 = analysisList.applicationProportion[0]
                this.value1 = analysisList.applicationProportion[0][0].key

                this.options2 = analysisList.applicationProportion[1]
                this.value2 = analysisList.applicationProportion[1][0].key

                this.ratio = this.options2[0].num
                this.initChart(type)

            }

        },
        trendList: {
            handler(newV, oldV) {
                this.radio1 = newV.name
                this.type = newV.type
            },
            deep: true
        }
    },
    mounted() {
        window.onresize = () => {
            //    console.log("1")
            this.height = window.innerHeight - 50 + 'px'
        }

        this.options1 = analysisList.applicationTrend
        this.value1 = analysisList.applicationTrend[0].key

        this.options2 = analysisList.applicationTrend[0].children
        this.value2 = analysisList.applicationTrend[0].children[0].key

        this.initChart(1)

    },

    methods: {

        inflate() {
            this.initChart(this.type)

        },
        initChart(type) {
            const myChart = echarts.init(document.getElementById('chart'))
            // myChart.setOption(option.lineType)
            // console.log("Echarts",option)

            // ------折线图
            // public_year

            // // 申请分析折线图

            if (type == 1) {
                let data = {
                    limit: this.limits,
                    accumulateRatio: this.ratio,
                    analysisField: this.value1,
                    queryConditions: JSON.parse(localStorage.getItem("searchData")).queryConditions
                }
                getData(data).then(res => {
                    // console.log("data11", res.data)
                    if (res.data.length == 0) {
                        this.$message({
                            message: '暂无数据',
                            type: 'warning'
                        })
                    }

                    inflate(option, res.data, this.type, (data) => {

                        // console.log("option99", data.tableList)

                        this.tableData = data.tableList
                        this.legend = data.legend

                        myChart.setOption(data.option, true)

                    })
                })
            }

            // ------折线图

            //  ----柱状图
            // applicants_stat
            if (type == 2) {

                let data = {
                    limit: this.limits,
                    accumulateRatio: this.ratio,
                    analysisField: this.value1,
                    queryConditions: JSON.parse(localStorage.getItem("searchData")).queryConditions
                }

                getZhu(data).then(res => {
                    // console.log("data11", res.data)
                    if (res.data.length == 0) {
                        this.$message({
                            message: '暂无数据',
                            type: 'warning'
                        })
                    }

                    inflateZhu(optionZhu, res.data, 2, (data) => {

                        // console.log("option99", data.tableList)

                        this.tableData = data.tableList
                        this.legend = data.legend

                        myChart.setOption(data.option, true)

                    })
                })
            }

            //  ----柱状图

            //  ----柱状图 --二维

            // applicants_stat
            if (type == 3) {
                const data = {
                    limit: this.limits,
                    accumulateRatio: this.ratio,
                    analysisField: this.value1,
                    queryConditions: JSON.parse(localStorage.getItem('searchData')).queryConditions
                }

                getZhu2(data).then(res => {
                    if (res.data.length == 0) {
                        this.$message({
                            message: '暂无数据',
                            type: 'warning'
                        })
                    }
                    // console.log('data11', res.data)

                    inflateZhu2(optionZhu2, res.data, 3, (data) => {
                        this.type = 3

                        myChart.setOption(data.option, true)
                        this.legend = data.legend
                        this.tableData = data.tableList
                    })
                })
            }

            //   ----柱状图 --二维

            //   ---- 饼图
            if (type == 4) {

                const data = {
                    limit: this.limits,
                    accumulateRatio: this.ratio,
                    analysisField: this.value1,
                    queryConditions: JSON.parse(localStorage.getItem('searchData')).queryConditions
                }
                getPie(data).then(res => {
                    if (res.data.length == 0) {
                        this.$message({
                            message: '暂无数据',
                            type: 'warning'
                        })
                    }

                    inflatePie(pie, res.data, 4, (data) => {

                        // console.log("22", data.option)

                        myChart.setOption(data.option, true)
                        this.legend = data.legend

                        this.tableData = data.tableList

                    })
                })

            }

            //   ---- 饼图
        },
        optionChange2(i) {

            // if (this.type == 1) {
            this.ratio = this.options2.filter(item => {
                return item.key == this.value2
            })[0].num

            // }

        },

        optionChange1(i) {

            if (this.type == 1) {
                this.options2 = this.options1.filter(item => {
                    return item.key == i
                })[0].children
                this.value2 = this.options2[0].key
            } else {

            }

        },

        back() {
            this.$router.go(-1)
        },
        download() {
            // console.log(document.getElementById('table'))
            domtoimage.toJpeg(document.getElementById('chart'), {
                    quality: 0.95
                })
                .then(function (dataUrl) {
                    var link = document.createElement('a')
                    link.download = 'char.jpeg'
                    link.href = dataUrl
                    link.click()
                })

            // domtoimage.toJpeg(document.getElementById('table'), {
            //         quality: 0.95
            //     })
            //     .then(function (dataUrl) {
            //         var link = document.createElement('a')
            //         link.download = 'table.jpeg'
            //         link.href = dataUrl
            //         link.click()
            //     })
        },
        exportE() {

            let head = []
            Object.keys(this.tableData[0]).forEach(key => {

                head.push(key)
            })

            // console.log(this.tableData)

            import('@/vendor/Export2Excel').then(excel => {
                const tHeader = head
                const filterVal = tHeader
                const list = this.tableData
                const data = this.formatJson(filterVal, list)
                excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: "测试",
                    autoWidth: true,
                    bookType: "xlsx"
                })
            })

        },

        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                if (j === 'timestamp') {
                    return parseTime(v[j])
                } else {
                    return v[j]
                }
            }))
        }
    }

}
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: row;

    .left {
        padding: 18px;
        overflow: hidden;
        width: 250px;
        box-sizing: border-box;
        border-right: 2px solid #ebebeb;
        position: relative;
        display: flex;
        flex-direction:column;

        ::v-deep .el-radio-group {
            display: flex;
            flex-direction: column;

            .el-radio-button__inner {
                width: 100%;
                border: none
            }
        }
        .leftS{

            ::v-deep .el-radio-group .el-radio-button__inner{
                text-align: left;
                padding-left: 0;
            }
        }

        .selects {

            width: 100%;
        }
    }

    .chart {
        flex: 1;
        overflow: hidden;

        .box-card {
            overflow: auto;
            width: calc(100% + 20px);

            .title {
                font-size: 12px;

            }
        }
    }

    .form {
        width: 250px;
    }
}
</style>
